.followme-target {
    box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 2px, rgba(33, 33, 33, 0.5) 0px 0px 0px 50000px;
    position: absolute;
    padding: 4px;
}

.followme-mask {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
}

.followme-message {
    position: absolute;
    padding: 4px;

    .followme-message-box {
        position: absolute;
        min-width: 300px;
        min-height: 100px;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 3px 8px rgba(33, 33, 33, 0.4);
        display: flex;
        flex-direction: column;
    }

    .followme-message-box_header {
        display: flex;
        justify-content: space-between;
        // height: 48px;
        flex-shrink: 0;
        align-items: center;
        padding: 0 16px;
        padding-top: 16px;
        // border-bottom: 1px solid #e0e0e0;

        span {
            font-size: 18px;
            font-weight: 700;
        }

        svg {
            cursor: pointer;
        }
    }

    .followme-message-box_arrow {
        border: 5px solid transparent;
        content: "";
        position: absolute;
        border-bottom-color: #fff;
    }

    .followme-message-box_content {
        flex: 1;
        height: 0;
        overflow: auto;
        padding: 16px;
        // padding-top: 0px;
        overflow: auto;
    }
    .followme-message-bottom {
        display: flex;
        padding: 16px;
        padding-top: 0px;
        justify-content: center;
        button {
            border-radius: 4px;
            background-color: #004baa;
            color: #fff;
            padding: 10px 17px;
            line-height: 16px;
            font-size: 14px;
            border: unset;
            cursor: pointer;
        }
    }
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.followme-positon {
    &-bottom-left {

        .followme-message-box_arrow {
            top: -10px;
            left: 20px;
        }
    }

    &-bottom-right {

        .followme-message-box_arrow {
            top: -10px;
            right: 20px;
        }
    }
    &-bottom {

        .followme-message-box_arrow {
            top: -10px;
            right: calc(50% - 5px);
        }
    }
    &-top {
        .followme-message-box_arrow {
            bottom: -10px;
            right: calc(50% - 5px);
            transform: rotate(180deg);
        }
    }
    &-top-left {

        .followme-message-box_arrow {
            bottom: -10px;
            left: 20px;
            transform: rotate(180deg);
        }
    }

    &-top-right {

        .followme-message-box_arrow {
            bottom: -10px;
            right: 20px;
            transform: rotate(180deg);
        }
    }
    &-left {
        .followme-message-box_arrow {
            right: -10px;
            top: calc(50% - 5px);
            transform: rotate(90deg);
        }
    }
    &-left-top {
        .followme-message-box_arrow {
            right: -10px;
            top: 20px;
            transform: rotate(90deg);
        }
    }
    &-left-bottom {
        .followme-message-box_arrow {
            right: -10px;
            bottom: 20px;
            transform: rotate(90deg);
        }
    }
    &-right {
        .followme-message-box_arrow {
            left: -10px;
            top: calc(50% - 5px);
            transform: rotate(-90deg);
        }
    }
    &-right-top {
        .followme-message-box_arrow {
            left: -10px;
            top: 20px;
            transform: rotate(-90deg);
        }
    }
    &-right-bottom {
        .followme-message-box_arrow {
            left: -10px;
            bottom: 20px;
            transform: rotate(-90deg);
        }
    }
}